<template>
  <div class="add-student">
    <div class="item">
      <div class="item-title">姓名</div>
      <div class="input">
        <el-input v-model="newStudent.F_name"></el-input>
      </div>
    </div>
    <div class="item">
      <div class="item-title">性别</div>
      <div class="input">
        <div class="radio-item btn" @click="newStudent.F_gender = 1">
          <i
            class="radio-icon"
            :class="{ checked: newStudent.F_gender === 1 }"
          ></i>
          <label>男</label>
        </div>
        <div class="radio-item btn" @click="newStudent.F_gender = 2">
          <i
            class="radio-icon"
            :class="{ checked: newStudent.F_gender === 2 }"
          ></i>
          <label>女</label>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="item-title">学号/考号</div>
      <div class="input">
        <el-input
          placeholder="输入学号/考号"
          maxlength="11"
          v-model="newStudent.F_no"
        ></el-input>
      </div>
    </div>
    <div class="item">
      <div class="item-title">班级</div>
      <div class="input">{{ classItem.Name }}</div>
    </div>
    <div class="item">
      <div class="item-title">家长手机</div>
      <div class="input">
        <el-input
          maxlength="11"
          placeholder="手机号码"
          v-model="newStudent.F_phone"
        ></el-input>
      </div>
    </div>
    <div class="item">
      <div class="item-title">学生账号</div>
      <div class="input">
        <el-input
          maxlength="18"
          placeholder="学生账号"
          v-model="newStudent.F_account"
        ></el-input>
      </div>
    </div>
    <div class="item sources-item">
      <div class="item-title">选考科目</div>
      <div class="input">
        <div class="data">
          <span>{{ checkedSubjectName }}</span>
          <div class="select-courses-wrapper" v-clickoutside="closeCourses">
            <span
              class="add-courses-btn btn"
              @click.self="showCourses = !showCourses"
              >添加</span
            >
            <div class="course-wrapper" v-show="showCourses">
              <div class="line">
                <div class="name">必选科目</div>
                <el-checkbox disabled checked>语文</el-checkbox>
                <el-checkbox disabled checked>数学</el-checkbox>
              </div>
              <div class="line">
                <div class="name">外语科目</div>
                <el-radio-group v-model="language">
                  <el-radio
                    v-for="item in $maps.examSubject.language"
                    :key="item.id"
                    :label="item.id"
                    >{{ item.name }}</el-radio
                  >
                </el-radio-group>
              </div>
              <div class="line">
                <div class="name">选考科目</div>
                <el-radio-group v-model="courseType">
                  <el-radio
                    v-for="item in $maps.examSubject.courseType"
                    :key="item.id"
                    :label="item.id"
                    >{{ item.name }}</el-radio
                  >
                </el-radio-group>
              </div>
              <div class="line">
                <div class="name">
                  <p>选考科目</p>
                  <p>(4选2)</p>
                </div>
                <el-checkbox-group v-model="checkedSubject">
                  <el-checkbox
                    v-for="item in $maps.examSubject.courses"
                    :key="item.id"
                    :label="item.id"
                    >{{ item.name }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Clickoutside from '@/utils/clickoutside';
import { mapGetters } from "vuex";
export default {
  name: "",
  components: {},
  directives: { Clickoutside },
  props: ["classItem"],
  data() {
    return {
      newStudent: {
        F_name: "",
        F_gender: 1,
        F_no: "",
        F_phone: "",
        identityNumber: "",
        courses: [],
        courseType: 1,
      },
      showCourses: false,
      language: 3,
      courseType: 4,
      checkedSubject: [5, 6],
    };
  },
  mounted() {
  },
  computed: {
    ...mapGetters('school', ['schoolSubjectList']),
    checkedSubjectName() {
      const { language, courseType, checkedSubject } = this;
      const list = []
        .concat(language)
        .concat(courseType)
        .concat(checkedSubject);
      return ["语文", "数学"]
        .concat(
          this.schoolSubjectList
            .filter((e) => list.includes(e.id))
            .map((e) => e.name)
        )
        .join("、");
    },
  },
  watch: {
    courseType() {
      if (this.courseType === 4) this.newStudent.courseType = 1;
      else this.newStudent.courseType = 2;
    },
  },
  methods: {
    closeCourses() {
      this.showCourses = false;
    },
  },
};
</script>

<style lang='less' scoped>
.add-student {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 0;
  .item {
    display: flex;
    align-items: center;
    margin: 8px 0;
    .item-title {
      display: inline-block;
      width: 30%;
      text-align: end;
    }
    .input {
      box-sizing: border-box;
      display: inline-flex;
      width: 60%;
      padding: 0 20px;
      text-align: start;
      position: relative;
      :deep(.el-input) {
        width: 350px;
        .el-input__inner {
          height: 35px;
        }
      }
      .radio-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        .radio-icon {
          width: 16px;
          height: 16px;
          margin-right: 6px;
          background: url("@/assets/image/common/单选.png") center no-repeat;
          background-size: 16px 16px;
        }
        .checked {
          background-image: url("@/assets/image/common/单选选中.png");
        }
      }

      .subject-select-wrapper {
        width: 100px;
        position: relative;
        font-size: 14px;
        .subject-name {
          display: inline-block;
          padding: 0 15px;
          width: 80px;
          height: 35px;
          line-height: 35px;
          border-radius: 4px;
          border: 1px solid #dcdfe6;
        }
        .subject-list {
          z-index: 996;
          background-color: #fff;
          box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 5%);
          border-radius: 4px;
          border: solid 2px #f5f5f5;
          position: absolute;
          top: 35px;
          left: 0;
          height: 110px;
          overflow-x: auto;
          li {
            cursor: pointer;
            padding: 10px 20px;
            &:hover {
              background-color: #ebf5ff;
            }
          }
        }
      }
    }
  }
  .sources-item {
    .data {
      position: relative;
      width: 350px;
      box-sizing: border-box;
      height: 40px;
      border: 1px solid #dcdfe6;
      padding: 0 15px;
      font-size: 14px;
      display: flex;
      align-items: center;
    }
    .select-courses-wrapper {
      user-select: none;
      position: absolute;
      top: 10px;
      right: 10px;
      .add-courses-btn {
        padding: 5px 10px;
        background-color: #009cff;
        color: #fff;
      }
      .course-wrapper {
        position: absolute;
        top: -175px;
        right: 0;
        text-align: start;
        box-sizing: border-box;
        width: 370px;
        height: 170px;
        border-radius: 4px;
        padding: 20px 20px;
        background-image: linear-gradient(#ffffff, #ffffff),
          linear-gradient(#cccccc, #cccccc);
        background-blend-mode: normal, normal;
        box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.15);
        .line {
          display: flex;
          margin-bottom: 10px;
          align-items: center;
          .name {
            width: 80px;
            margin-right: 10px;
            flex-shrink: 0;
          }
        }
      }
    }
  }
}
</style>
